<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">


    <link rel="apple-touch-icon" type="image/png" href="" />

    <meta name="apple-mobile-web-app-title" content="">

    <link rel="shortcut icon" type="image/x-icon" href="" />

    <link rel="mask-icon" type="image/x-icon" href="" color="#111" />




    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>


    <title>经验分享</title>

    <link rel="canonical" href="https://codepen.io/hexagoncircle/pen/gOPMwvd">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">



    <style>
        @import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap");
         :root {
            --bg-color-hsl: 59, 3%, 94%;
            --bg-color: hsl(var(--bg-color-hsl));
            --bg-color-translucent: hsla(var(--bg-color-hsl), 0.95);
            --bg-color-highlight: hsl(60, 90%, 50%);
            --color-text: hsl(192, 14%, 20%);
            --color-text-highlight: hsl(192, 14%, 0%);
            --page-width: 80ch;
            --paragraph-font-size: min(max(1.2rem, 4vw), 1.4rem);
            --header-font-size: min(max(2rem, 8vw), 4rem);
            --space: 2rem;
            --padding: 8vmin;
            --duration: 1s;
            --ease: cubic-bezier(0.25, 1, 0.5, 1);
        }
        
        .dark-mode {
            --bg-color-hsl: 0, 0%, 7%;
            --bg-color: hsl(var(--bg-color-hsl));
            --bg-color-translucent: hsla(var(--bg-color-hsl), 0.95);
            --bg-color-highlight: hsl(238, 70%, 40%);
            --color-text: hsl(0, 0%, 80%);
            --color-text-highlight: hsl(0, 0%, 100%);
        }
        
        * {
            box-sizing: border-box;
        }
        
        body {
            font-family: "Lora", sans-serif;
            font-weight: 400;
            color: var(--color-text);
            background-color: var(--bg-color);
            transition: background calc(var(--duration) / 4) var(--ease);
        }
        
        header {
            display: flex;
            justify-content: space-between;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            padding: calc(var(--space) / 2) var(--padding);
            width: 100%;
            max-width: var(--page-width);
            background-color: var(--bg-color-translucent);
            transition: background calc(var(--duration) / 4) var(--ease);
        }
        
        header .wrapper {
            display: flex;
            align-items: center;
        }
        
        header .wrapper>*+* {
            margin-left: 4px;
        }
        
        select {
            font-family: inherit;
            font-size: 16px;
        }
        
        label {
            font-size: 0.8rem;
        }
        
        main {
            margin: 12rem auto;
            padding: 0 var(--padding);
            max-width: var(--page-width);
        }
        
        h1 {
            font-size: var(--header-font-size);
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 4rem;
        }
        
        h3 {
            font-size: var(--header-font-size);
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 4rem;
        }
        
        p {
            margin: 2rem 0;
            font-size: var(--paragraph-font-size);
            line-height: 1.7;
        }
        
        .text-highlight {
            all: unset;
            background-repeat: no-repeat;
            background-size: 0% 100%;
            transition: color calc(var(--duration) / 4) var(--ease), background-color calc(var(--duration) / 4) var(--ease), background-size var(--duration) var(--ease);
        }
        
        .text-highlight.active {
            color: var(--color-text-highlight);
            background-size: 100% 100%;
        }
        
        [data-highlight=background] .text-highlight {
            background-image: linear-gradient(var(--bg-color-highlight), var(--bg-color-highlight));
        }
        
        [data-highlight=half] .text-highlight {
            --line-size: 0.5em;
            background-image: linear-gradient(transparent calc(100% - var(--line-size)), var(--bg-color-highlight) var(--line-size));
        }
        
        [data-highlight=underline] .text-highlight {
            --line-size: 0.15em;
            background-image: linear-gradient(transparent calc(100% - var(--line-size)), var(--color-text) var(--line-size));
        }
        
        .text-highlight::before,
        .text-highlight::after {
            position: absolute;
            -webkit-clip-path: inset(100%);
            clip-path: inset(100%);
            clip: rect(1px, 1px, 1px, 1px);
            width: 1px;
            height: 1px;
            overflow: hidden;
            white-space: nowrap;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        .text-highlight::before {
            content: " [highlight start] ";
        }
        
        .text-highlight::after {
            content: " [highlight end] ";
        }
    </style>

    <script>
        window.console = window.console || function(t) {};
    </script>



</head>

<body translate="no">
    <header>
        <div class="wrapper">
            <label>样式:</label>
            <select id="highlight-style">
      <option>background</option>
      <option>half</option>
      <option>underline</option>
    </select>
        </div>
        <div class="wrapper">
            <input type="checkbox" id="mode" />
            <label for="mode">夜间模式</label>
        </div>
    </header>

    <main>
        <h1>史晓龙</h1>
        <h3>圆角新写法</h3>
        <p>

            <p>.btn { width: 300px;<br> height:80px：
                <br> border-radius:40px;}

                <mark class="text-highlight">border-radius必须低于height的一半</mark> .</p>
            <p> 新写法： <mark class="text-highlight">border-radius:calc(nifinty * 1px)</mark>.</p>
    </main>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/gsap.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.1/ScrollTrigger.min.js'></script>
    <script id="rendered-js">
        const highlight = document.getElementById("highlight-style");
        const mode = document.getElementById("mode");

        gsap.registerPlugin(ScrollTrigger);

        gsap.utils.toArray(".text-highlight").forEach(highlight => {
            ScrollTrigger.create({
                trigger: highlight,
                start: "-100px center",
                onEnter: () => highlight.classList.add("active")
            });

        });

        const setHighlightStyle = (value) =>
            document.body.setAttribute("data-highlight", value);

        mode.addEventListener("click", (e) =>
            document.body.classList.toggle("dark-mode"));


        highlight.addEventListener("change", e => setHighlightStyle(e.target.value));

        setHighlightStyle(highlight.value);
        //# sourceURL=pen.js
    </script>


</body>

</html>